<template>
	<view class="login-container">
		<view class="login-header">
			<text class="app-title">考试APP</text>
			<text class="app-subtitle">在线学习 轻松考试</text>
		</view>
		
		<view class="login-form">
			<view class="form-item">
				<image class="icon" src="/image/gerenzhongxin.png" mode="aspectFit"></image>
				<input class="input" type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			
			<view class="form-item">
				<image class="icon" src="/image/mima.png" mode="aspectFit"></image>
				<input class="input" 
					:type="showPassword ? 'text' : 'password'" 
					v-model="password" 
					placeholder="请输入密码"
					@input="onPasswordInput" />
			</view>
			
			<view class="forgot-password">
				<text @click="handleForgot">忘记密码?</text>
			</view>
			
			<button class="login-btn" @click="handleLogin">登录</button>
			
			<view class="register-link">
				<text>还没有账号?</text>
				<text class="link" @click="handleRegister">立即注册</text>
			</view>
		</view>
		
		<view class="other-login">
			<view class="divider">
				<view class="line"></view>
				<text class="text">其他登录方式</text>
				<view class="line"></view>
			</view>
			<view class="social-icons">
				<view class="social-item">
					<image src="/image/weixin.png" mode="aspectFit"></image>
				</view>
				<view class="social-item">
					<image src="/image/QQ.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '@/http.js'

export default {
	data() {
		return {
			username: 'student',
			password: '123456',
			showPassword: false,
			loading: false
		}
	},
	methods: {
		onPasswordInput(e) {
			// 确保密码值被正确捕获
			this.password = e.detail.value || e.target.value || '';
			console.log('密码输入:', this.password, 'length:', this.password.length);
		},
		async handleLogin() {
			// 更严格的密码检查
			const trimmedUsername = (this.username || '').trim();
			const trimmedPassword = (this.password || '').trim();
			
			console.log('用户名:', trimmedUsername, '长度:', trimmedUsername.length);
			console.log('密码:', trimmedPassword, '长度:', trimmedPassword.length);
			
			if (!trimmedUsername || trimmedUsername.length === 0) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return;
			}
			if (!trimmedPassword || trimmedPassword.length === 0) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			
			this.loading = true;
			
			try {
				console.log('=== 登录请求开始 ===');
				console.log('用户名:', trimmedUsername);
				console.log('密码:', trimmedPassword);
				
				// 判断是否为开发环境
				const isDev = import.meta.env.DEV || process.env.NODE_ENV === 'development'
				const loginUrl = isDev ? '/api/user/login' : 'http://60.205.2.196:8000/api/user/login'
				console.log('登录接口地址:', loginUrl);
				
				// 使用 uni.request 直接调用以获取完整响应（包括 header）
				const loginRes = await new Promise((resolve, reject) => {
					uni.request({
						url: loginUrl,
						method: 'POST',
						data: {
							userName: trimmedUsername,
							password: trimmedPassword
						},
						header: {
							'Content-Type': 'application/json'
						},
						withCredentials: true,  // 允许携带和保存 cookie
						success: (res) => {
							console.log('=== 登录原始响应 ===');
							console.log('状态码:', res.statusCode);
							console.log('响应数据:', JSON.stringify(res.data, null, 2));
							console.log('响应 Header:', JSON.stringify(res.header, null, 2));
							console.log('响应 Cookies:', res.cookies);
							
							// 尝试从 header 中提取 Set-Cookie
							const setCookie = res.header['set-cookie'] || res.header['Set-Cookie'];
							if (setCookie) {
								console.log('✅ 找到 Set-Cookie:', setCookie);
							} else {
								console.log('⚠️ Header 中没有 Set-Cookie');
							}
							
							// 在浏览器环境下，检查 document.cookie
							if (typeof document !== 'undefined') {
								console.log('浏览器 Cookie:', document.cookie);
							}
							
							resolve(res);
						},
						fail: (err) => {
							console.error('登录请求失败:', err);
							reject(err);
						}
					});
				});
				
				const res = loginRes.data;
				
				if (res && res.code === 1) {  // 文档中成功的 code 是 1
					console.log('=== 登录成功 ===');
					
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					
					// 尝试多种方式获取 token
					let token = null;
					
					// 方式1: 从响应 header 中获取（常见字段名）
					const headerToken = loginRes.header?.token 
						|| loginRes.header?.Token 
						|| loginRes.header?.authorization 
						|| loginRes.header?.Authorization
						|| loginRes.header?.['x-token']
						|| loginRes.header?.['X-Token'];
					
					if (headerToken) {
						console.log('✅ 从 Header 中找到 token:', headerToken);
						token = headerToken;
					}
					
					// 方式2: 从响应体中获取
					if (!token) {
						if (typeof res.response === 'string') {
							console.log('✅ Response 直接是字符串 token');
							token = res.response;
						} else if (res.response && typeof res.response === 'object') {
							// 尝试常见的 token 字段名
							token = res.response.token 
								|| res.response.accessToken 
								|| res.response.authToken
								|| res.response.jwt;
							
							if (token) {
								console.log('✅ 从 Response 对象中找到 token:', token);
							}
							
							// 保存用户信息
							console.log('保存用户信息:', res.response);
							uni.setStorageSync('userInfo', res.response);
						}
					}
					
					// 方式3: 从 Cookie 中获取（H5环境）
					if (!token && loginRes.cookies && loginRes.cookies.length > 0) {
						const tokenCookie = loginRes.cookies.find(c => 
							c.name === 'token' || c.name === 'TOKEN' || c.name === 'jwt'
						);
						if (tokenCookie) {
							console.log('✅ 从 Cookie 中找到 token:', tokenCookie.value);
							token = tokenCookie.value;
						}
					}
					
					console.log('最终 token:', token);
					console.log('Token 类型:', typeof token);
					console.log('Token 长度:', token?.length);
					
					if (token && typeof token === 'string' && token.trim().length > 0) {
						uni.setStorageSync('token', token);
						const savedToken = uni.getStorageSync('token');
						console.log('✅ Token 已保存，验证:', savedToken);
					} else {
						console.warn('⚠️ 未找到 token，使用 Session 认证');
						console.warn('系统使用 Session/Cookie 认证，但由于跨域限制，Cookie 可能无法正常工作');
						
						// 保存用户信息和用户名作为临时认证标识
						if (res.response && typeof res.response === 'object') {
							uni.setStorageSync('userInfo', res.response);
							uni.setStorageSync('userName', res.response.userName);
							console.log('✅ 已保存用户信息和用户名');
						}
						
						// 不再显示模态框警告，直接尝试继续
						console.log('💡 提示：如果后续接口仍返回 401，请联系后端配置 CORS 跨域凭证支持');
					}
					
					// 登录成功后获取用户信息
					try {
						const userRes = await api.getCurrentUser();
						console.log('用户信息响应:', JSON.stringify(userRes));
						if (userRes && userRes.code === 1) {
							uni.setStorageSync('userInfo', userRes.response);
							console.log('用户信息已保存');
						}
					} catch (userErr) {
						console.error('获取用户信息失败:', userErr);
					}
					
					// 延迟跳转以确保数据保存
					setTimeout(() => {
						console.log('=== 开始跳转到首页 ===');
						uni.switchTab({
							url: '/pages/exam/list',
							success: () => {
								console.log('跳转成功');
							},
							fail: (err) => {
								console.error('跳转失败:', err);
							}
						});
					}, 1500);
				} else {
					console.error('登录失败，服务器返回:', res);
					uni.showToast({
						title: res.message || res.msg || '登录失败',
						icon: 'none'
					});
				}
			} catch (err) {
				console.error('登录错误:', err);
				console.error('错误详情:', JSON.stringify(err));
				uni.showToast({
					title: '登录失败，请检查网络和账号密码',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		handleForgot() {
			uni.showToast({
				title: '请联系管理员',
				icon: 'none'
			});
		},
		handleRegister() {
			uni.showToast({
				title: '注册功能开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 100%);
	padding: 80rpx 60rpx;
	box-sizing: border-box;
	
	.login-header {
		text-align: center;
		margin-bottom: 100rpx;
		
		.app-title {
			display: block;
			font-size: 68rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 20rpx;
		}
		
		.app-subtitle {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
	
	.login-form {
		background: #fff;
		border-radius: 30rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
		
		.form-item {
			display: flex;
			align-items: center;
			background: #f5f5f5;
			border-radius: 50rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			height: 90rpx;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			
			.input {
				flex: 1;
				font-size: 28rpx;
			}
		}
		
		.forgot-password {
			text-align: right;
			margin-bottom: 40rpx;
			
			text {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.login-btn {
			width: 100%;
			height: 90rpx;
			background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 100%);
			border-radius: 50rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			border: none;
			margin-bottom: 30rpx;
		}
		
		.register-link {
			text-align: center;
			font-size: 26rpx;
			color: #666;
			
			.link {
				color: #FFB6C1;
				margin-left: 10rpx;
			}
		}
	}
	
	.other-login {
		margin-top: 80rpx;
		
		.divider {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			
			.line {
				flex: 1;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.3);
			}
			
			.text {
				padding: 0 30rpx;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
		
		.social-icons {
			display: flex;
			justify-content: center;
			gap: 60rpx;
			
			.social-item {
				width: 80rpx;
				height: 80rpx;
				background: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1);
				
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
}
</style>
